<template>
	<view class="zone">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="main">
			<view class="boxinfo">
				<image class="bg1" src="http://image.qxgm.site/tdz/img/game/bg1.gif" mode="widthFix"></image>
				<image class="download" @click="downgame()" src="http://image.qxgm.site/tdz/img/game/btn.gif"
					mode="widthFix"></image>
			</view>
			<view class="top">
				<image class="logo" src="http://image.qxgm.site/tdz/img/game/logo2.png" mode="widthFix"></image>
				<view class="word">
					<h3>御剑八荒</h3>
					<view class="jiehsoa">
						认准图标,苹果提示损坏无视即可！
					</view>
				</view>
				<view class="button" @click="show=true">专属账号</view>
			</view>

			<view class="box">

				<view class="kbox">
					<view class="shuangbei">
						限时双倍
					</view>
					<view class="mmbox">
						<image class="mmimg" src="http://image.qxgm.site/tdz/img/game/shenhsi.gif" mode="widthFix">
						</image>
						<view class="mmp">
							游戏福利:游戏充值10元免费赠送10神石
						</view>
					</view>


					<view class="tlink">
						<view class="tleft">
							<p class="p1">苹果安装步骤：</p>
							<p class="p2">下载后打开手机设置-通用-描述文件于设备
								管理-找到对应APP-点击信任即可进行游戏</p>
							<p class="p3">若无法下载，请扫码安装</p>
						</view>
						<tki-qrcode class="codeimg" ref="qrcode" cid="qrcode" :lv="1" :val="val1" :size="166"
							:loadMake="true" />
					</view>
					<view class="btns">
						<view class="btnr" @click="$p.navto('/pages/index/equipgrade')">
							装备奖励
						</view>
						<view class="btnr" @click="$p.navto('/pages/index/rewardgrade')">
							等级奖励
						</view>
						<view class="btnr" @click="$p.navto('/pages/index/zzvip')">
							至尊礼包码
						</view>
					</view>
				</view>





			</view>


		</view>

		<u-mask :show="show">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>专属账号</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">

							<p class="tanpp">请用你的专属账号直接登录御剑八荒即可，账号道具宝贵，请勿向任何人透露您的账号密码，发生装备、道具、货币被盗，请及时联系客服！<span
									style="color: red;">账号前缀TD:“天道”首拼不区分大小写！</span></p>
							<view class="spart">
								<text class="sp1">账号</text>
								<view class="knb">
									<text class="sp2">{{userinfo.account}}</text>
									<view class="tancopy" @click="copy(userinfo.account)">
										复制
									</view>
								</view>

							</view>
							<view class="spart">
								<text class="sp1">密码</text>
								<view class="knb">
									<text class="sp2">{{isshow?userinfo.password:'******'}}</text>
									<view class="tancopy" @click="seepas">
										查看
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="show = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<u-tabbar v-model="current" :border-top="false" :list="list" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/1.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/11.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/home',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/2.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/22.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/experience',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/4.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/44.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/equip',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/3.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/33.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/game',
					}
				],
				current: 1,
				userinfo: uni.getStorageSync('userinfo'),
				val1: 'http://sy.1n.cn/index.php?s=/Home/Index/game_view/promote_id/39517/game_id/3605.html',
				show: true,
				isshow: false,
			};
		},
		onReady() {},
		onLoad() {
			this.gameAccountcode();
		},
		methods: {
			// 获取个人信息
			async gameAccountcode() {
				let res = await this.$http.index.gameAccountcode()
				if (res.code == 1) {
					this.userinfo = res.data
				}
			},
			seepas() {
				this.isshow = !this.isshow
			},
			downgame() {
				if (this.$u.os() == 'android') {
					plus.runtime.openURL(this.val1, function(res) {});
				} else if (this.$u.os() == 'ios') {
					location.href = this.val1
				} else {
					location.href = this.val1
				}
			},
			copy(text) {
				this.$p.copy(text)
			},

		},
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/game/bg2.png) no-repeat;
		background-size: 100% 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bg1 {
		width: 100%;
	}

	.main {
		padding: 0 0px 80px;
	}

	.top {
		position: fixed;
		// #ifdef APP-PLUS
		top: 25px;
		// #endif
		// #ifdef H5
		top: 0px;
		// #endif
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(0deg, rgba(65, 17, 8, 0.66), rgba(42, 15, 5, 0.66));
		width: 100%;
		padding: 11px 13px 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.word {
			flex: 1;
			margin-left: 10px;

			h3 {
				font-size: 15px;
				color: #FFFFFF;
				line-height: 15px;
				background: linear-gradient(0deg, #EABA6E 0.4150390625%, #FFE719 97.9736328125%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				margin-bottom: 3px;
			}

			.jiehsoa {
				font-size: 13px;
				font-weight: normal;
				color: #FFFFFF;
			}
		}
	}

	.shuangbei {
		font-size: 14px;
		color: red;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		line-height: 14px;
		margin-bottom: 5px;
	}

	.button {
		width: 103px;
		text-align: center;
		font-size: 14px;
		color: #f1e7a0;
		font-weight: normal;
		height: 35px;
		line-height: 35px;
		text-shadow: 0px 1px 2px rgba(72, 16, 7, 0.54);
		background: url(http://image.qxgm.site/tdz/img/game/btn.png) no-repeat;
		background-size: 100% 100%;
	}

	.logo {
		width: 53px;
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/game/bg2.png) no-repeat;
		background-size: 100% 100%;
		padding: 0 14px 0px;
		box-sizing: border-box;
		margin-top: -4px;
	}

	.kbox {
		padding: 6px 9px 24px;
		background: rgba(60, 15, 3, 0.6);
		border-radius: 8px;
	}

	.boxinfo {
		position: relative;
	}

	.download {
		position: absolute;
		bottom: 34%;
		left: 50%;
		transform: translateX(-50%);
		width: 51%;
	}

	.mmbox {
		position: relative;
		display: flex;
		align-items: center;
		background: url(http://image.qxgm.site/tdz/img/game/hen.png) no-repeat;
		background-size: 100% 100%;
		border-radius: 20px 0 0 20px;
		margin-bottom: 18px;

		.mmimg {
			position: absolute;
			top: -2px;
			left: -3px;
			width: 32px;
		}

		.mmp {
			font-size: 15px;
			color: #FFFFFF;
			font-weight: normal;
			padding: 8px 0 8px 30px;
			line-height: 15px;
			background: linear-gradient(0deg, #F0F6CE 0.1220703125%, #FDFD88 46.337890625%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.tlink {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tleft {
			width: 63%;
		}

		.p1 {
			font-size: 14px;
			color: #FFFFFF;
			font-weight: normal;
			line-height: 14px;
			margin-bottom: 6px;
		}

		.p2 {
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 14px;
			zoom: 0.92;
		}

		.p3 {
			font-weight: normal;
			font-size: 15px;
			color: #FFFFFF;
			background: linear-gradient(0deg, #F8FFFD 0.1220703125%, #F6DCBA 46.337890625%, #E0C6A3 100%, #213E6F 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-top: 20px;
		}

		.codeimg {
			padding: 5px 5px 2px;
			background: #fff;
		}
	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		margin-top: 3vh;

		.btnr {
			width: 32%;
			text-align: center;
			font-size: 15px;
			color: #f1e7a0;
			font-weight: normal;
			height: 38px;
			line-height: 38px;
			text-shadow: 0px 1px 2px rgba(72, 16, 7, 0.54);
			background: url(http://image.qxgm.site/tdz/img/game/btn.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.jihuop {
		padding: 0 10%;

		.tanpp {
			font-size: 14px;
			color: #50433A;
			font-weight: normal;
			line-height: 18px;
			margin-bottom: 10px;
		}

		.spart {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6px;

		}

		.sp1 {
			font-size: 15px;
			font-weight: normal;
			color: #50433A;
			line-height: 15px;
			margin-right: 8px;
		}

		.knb {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #BCB8BA;
			border-radius: 1px;
			padding: 6px 6px 6px 18px;
			box-sizing: border-box;
		}

		.sp2 {
			font-size: 15px;
			font-weight: normal;
			color: #50433A;
			line-height: 15px;
		}

		.tancopy {
			width: 49px;
			height: 28px;
			text-align: center;
			font-weight: normal;
			font-size: 12px;
			color: #faecbd;
			line-height: 28px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
		}
	}
</style>